{% extends 'common/basic_layout.html' %}

{% block content %}
    <script src="/static/asserts/require.js"></script>
    <link href="/static/hplus/css/plugins/chosen/chosen.css" rel="stylesheet">
    <script src="/static/hplus/js/plugins/chosen/chosen.jquery.js"></script>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>部署
                        </h5>
                    </div>
                    <div class="ibox-content">
                        <form method="post" enctype="multipart/form-data"
                              action="/frontend/deploy_manager/project_list/project_version_add_action/"
                              onsubmit="return preSubmit()"
                              class="form-horizontal">
                            {% csrf_token %}
                            <input type="hidden" id="id" name="id" value="{{ pk }}"/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"> 业务版本</label>
                                <div class="col-sm-10">
                                    {{ project_version_obj.name }}
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"> 主机组</label>
                                <div class="col-sm-10">
                                    <select data-placeholder="选择主机组"
                                            multiple class="form-control chosen-select" id="hostgroup"
                                            tabindex="4">
                                        {% for o in host_group_list %}
                                            <option value="{{ o.id }}">{{ o.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"> 已关联主机组</label>
                                <div class="col-sm-10">
                                    <table class="table table-striped table-bordered table-hover dataTables-example dataTable">
                                        <thead>
                                        <tr>
                                            <th style="width: 80%;">主机组</th>
                                            <th style="width:5%;">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for o in project_host_group %}
                                            <tr id="hg{{ o.id }}">
                                                <td>{{ o.hostgroup.name }}</td>
                                                <td>
                                                    <a href="javascript:void(0)"
                                                       onclick="uninstallHostGroup('{{ o.id }}','{{ pk }}')"
                                                       class="btn  btn-sm btn-success"><i class="fa fa-edit"></i>卸载</a>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                    <script>
                                        function uninstallHostGroup(id, pk) {
                                            layer.load();
                                            $.get('project_hostgroup_undeploy_action/?pk=' + id, function (rs) {
                                                $('#hg' + id).remove()
                                                layer.closeAll('loading');
                                            })
                                        }
                                    </script>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"> 主机</label>
                                <div class="col-sm-10">
                                    <select data-placeholder="选择主机"
                                            multiple class="form-control chosen-select"
                                            id="hosts"
                                            tabindex="4">
                                        {% for o in host_list %}
                                            <option value="{{ o.id }}">{{ o.host_name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"> 已关联主机</label>
                                <div class="col-sm-10">
                                    <table class="table table-striped table-bordered table-hover dataTables-example dataTable">
                                        <thead>
                                        <tr>
                                            <th style="width: 80%;">主机</th>
                                            <th style="width:5%;">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for o in project_host %}
                                            <tr id="h{{ o.id }}">
                                                <td>{{ o.host.host_name }}</td>
                                                <td>
                                                    <a href="javascript:void(0)"
                                                       onclick="uninstall_host('{{ o.id }}')"
                                                       class="btn  btn-sm btn-success"><i class="fa fa-edit"></i>卸载</a>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                    <script>
                                        function uninstall_host(id) {
                                            layer.load();
                                            $.get('project_host_undeploy_action/?pk=' + id, function (rs) {
                                                $('#h' + id).remove()
                                                layer.closeAll('loading');
                                            })
                                        }
                                    </script>
                                </div>
                            </div>
                            <div class="hr-line-dashed" id="result_line"></div>
                            <div id="result">

                            </div>
                            <script type="text/template" id="tpl">
                                <% _.each(result, function (item) { %>
                                <div class="form-group">
                                    <div class="col-sm-10">
                                        <div class="col-sm-10" class="form-control">
                                            <label class="col-sm-2 control-label"><%=item.host_name%></label>'
                                            <div class="col-sm-10" class="form-control">
                                                <%=item.is_success%>
                                                <a href="javascript:void(0)"
                                                   onclick="showContent('<%=item.host_name.trim()%>')">显示详情</a>
                                                <div style="display:none" id="<%=item.host_name%>">
                                                    <% _.each(item.result, function (subitem) { %>
                                                    部署结果:<%=subitem.deploy_message%>
                                                    <br/>
                                                    作业命令：<%=subitem.job_cmd%>
                                                    <br/>
                                                    异常信息：<%=subitem.stderr%>
                                                    <br/>
                                                    执行状态：<%=subitem.is_success%>
                                                    <hr/>
                                                    <% }); %>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <% }); %>
                            </script>
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <a href="javascript:void(0)" class="btn btn-primary"
                                       onclick="execute()">部署</a>
                                    <a class="btn btn-white" href="javascript:history.go(-1)">取消</a>
                                </div>
                            </div>
                        </form>
                        <hr/>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var result = []
        function execute() {
            layer.load();
            var hosts_id = $('#hosts').val();
            hosts_str = "";
            if (hosts_id != null) {
                for (var i = 0; i < hosts_id.length; i++) {
                    hosts_str += hosts_id[i] + ',';
                }
                hosts_str = hosts_str.substr(0, hosts_str.length - 1)
            }

            var hostsgroup_id = $('#hostgroup').val();
            hostsgroup_str = "";
            if (hostsgroup_id != null) {
                for (var i = 0; i < hostsgroup_id.length; i++) {
                    hostsgroup_str += hostsgroup_id[i] + ',';
                }
                hostsgroup_str = hostsgroup_str.substr(0, hostsgroup_str.length - 1)
            }
            $.post('/frontend/deploy_manager/project_list/project_deploy_action/?pk={{ pk }}', {
                'hostids': hosts_str,
                'hostgroup_ids': hostsgroup_str,
                'csrfmiddlewaretoken': '{{ csrf_token }}',
                {% for k,v in param_list %}
                    '{{ v }}': $('#{{ v }}').val(),
                {% endfor %}
            }, function (rs) {
                result = rs.jobDetails
                $('#result').html(_.template($('#tpl').html(), result));
                layer.closeAll('loading');
            })
        }
        function showContent(id) {
            $('#' + id).show()
        }
        $(document).ready(function () {
            $('.chosen-select').chosen();

        })

    </script>

{% endblock %}
